<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由传参</title>
</head>
<!-- 
   restful风格传参
    如果使用params方式传参，又不想刷新时 丢失数据 name就、
    使用restful风格传参
   
 -->
<body>
    <div id="app">
        <p>
            <router-link to="/home">home</router-link><br>
            <!-- <router-link :to="{path:'/news',query:{id:id,name:name}}">news</router-link> -->
            <router-link to="/news/100/lisi">news</router-link>
        </p>
        <router-view></router-view>
    </div>
    
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>
    <script>
        const Home = {
            template:'<div>首页</div>'
        }
        const News = {
            template:
                `<div>
                  新闻:
                  参数1:{{$route.params.id}}
                  参数2:{{$route.params.name}}   
                </div>`
        }

    //2.定义路由规则对象 ，每个路由只能映射一个组件
        const routes = [
            {
                path:'/',//根路由
                redirect:'/home'//把根路由重定向到home
            },
            {
                path:'/home',
                name:'Home',
                component:Home 
            },
            {
                path:'/news',
                name:'News',
                component:News 
            }
        ]
        const router = VueRouter.createRouter({
            history:VueRouter.createWebHashHistory(),
            routes:routes
        })

        Vue.createApp({
            data(){
                return{
                    id:1,
                    name:'zhangsan'
                }
            }
        }).use(router).mount('#app')
    </script>
</body>

</html>